Show / Hide Table of Contents
Close
Loading …
There was an error loading this resource. Please try again later.
 Improve this Doc  View Source

input[number]

  1. - input in module ng
Contents

Overview

Text input with number validation and transformation. Sets the number validation error if not a valid number.

The model must always be of type number otherwise AngularJS will throw an error. Be aware that a string containing a number is not enough. See the numfmt error docs for more information and an example of how to convert your model if necessary.

Known Issues

HTML5 constraint validation and allowInvalid

In browsers that follow the HTML5 specification, input[number] does not work as expected with ngModelOptions.allowInvalid. If a non-number is entered in the input, the browser will report the value as an empty string, which means the view / model values in ngModel and subsequently the scope value will also be an empty string.

Large numbers and step validation

The step validation will not work correctly for very large numbers (e.g. 9999999999) due to Javascript's arithmetic limitations. If you need to handle large numbers, purpose-built libraries (e.g. https://github.com/MikeMcl/big.js/), can be included into AngularJS by overwriting the validators for number and / or step, or by applying custom validators to an input[text] element. The source for input[number] type can be used as a starting point for both implementations.

Directive Info

  • This directive executes at priority level 0.

Usage

<input type="number"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min="string"]
       [ng-max="string"]
       [step="string"]
       [ng-step="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

Arguments

Param Type Details
ngModel string

Assignable AngularJS expression to data-bind to.
name
(optional)
 string

Property name of the form under which the control is published.
min
(optional)
 string

Sets the min validation error key if the value entered is less than min. Can be interpolated.
max
(optional)
 string

Sets the max validation error key if the value entered is greater than max. Can be interpolated.
ngMin
(optional)
 string

Like min, sets the min validation error key if the value entered is less than ngMin, but does not trigger HTML5 native validation. Takes an expression.
ngMax
(optional)
 string

Like max, sets the max validation error key if the value entered is greater than ngMax, but does not trigger HTML5 native validation. Takes an expression.
step
(optional)
 string

Sets the step validation error key if the value entered does not fit the step constraint. Can be interpolated.
ngStep
(optional)
 string

Like step, sets the step validation error key if the value entered does not fit the ngStep constraint, but does not trigger HTML5 native validation. Takes an expression.
required
(optional)
 string

Sets required validation error key if the value is not entered.
ngRequired
(optional)
 string

Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngMinlength
(optional)
 number

Sets minlength validation error key if the value is shorter than minlength.
ngMaxlength
(optional)
 number

Sets maxlength validation error key if the value is longer than maxlength. Setting the attribute to a negative or non-numeric value, allows view values of any length.
pattern
(optional)
 string

Similar to ngPattern except that the attribute value is the actual string that contains the regular expression body that will be converted to a regular expression as in the ngPattern directive.
ngPattern
(optional)
 string

Sets pattern validation error key if the ngModel $viewValue does not match a RegExp found by evaluating the AngularJS expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
ngChange
(optional)
 string

AngularJS expression to be executed when input changes due to user interaction with the input element.

Example

<script>
  angular.module('numberExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        value: 12
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Number:
    <input type="number" name="input" ng-model="example.value"
           min="0" max="99" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>
  <tt>value = {{example.value}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>